<%@ page import="billwood.WoodBill" %>
<!DOCTYPE html>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'woodBill.label', default: 'WoodBill')}" />
		<title><g:message code="default.create.label" args="[entityName]" /></title>
                <style type="text/css">
                  body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
                  #slidercherry { width:250px;margin:20px 0px 20px 100px; }
                  #sliderCurlyMaple { width:250px;margin:20px 0px 20px 100px; }
                  #sliderGenuineMahogany { width:250px;margin:20px 0px 20px 100px; }
                  #sliderWenge { width:250px;margin:20px 0px 20px 100px; }
                  #sliderWhiteOak { width:250px;margin:20px 0px 20px 100px; }
                  #sliderSawdust { width:250px;margin:20px 0px 20px 100px; }
                </style>
                <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
                <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
   
                <!-- Agregamos también el archivo CSS del theme que usemos -->     
                <script type="text/javascript">
                  $(document).ready(function()
                  {
                    // Mostrar el slider
                    $("#slidercherry").slider
                    ( 
                    {                                         
                      min:0,
                      max:1000, 
                      value:0,
                      slide:movimientoa,
                      change:cambiadoa,
                      stop:paradoa,
                      step:1        
                      }
                    );
                                           
              // Aplicar al slider un valor introducido
              $("#quantyCherry").change(function()
              {
                   var valora = $("#quantyCherry").val();
                   $("#slidercherry").slider( {value : valora} );
              })
          });

          // ---------------

          // A cada movimiento del deslizador sin soltar el botón
          function movimientoa( event, ui )
          {            
               $("#quantyCherry").attr("value", ui.value );
          }
          // ---------------

          // Después de soltar el botón y después de producirse el evento 'stop'
          function cambiadoa( event, ui )
          {

               $("#").attr("value", ui.value);
          }

          // ---------------

          // Justo después de soltar el botón y antes de producirse el evento 'change'
          function paradoa( event, ui )
          {
               $("#log").append("stop ");
          }
      </script>   
    <script type="text/javascript">
    
     $(document).ready(function()
        {
            // Mostrar el slider
             $("#sliderCurlyMaple").slider( {min:0,
                                   max:1000, 
                                   value:0,
                                   slide:movimientob,
                                   change:cambiadob,
                                   stop:paradob,
                                   step:1
                                });
            
            // Aplicar al slider un valor introducido
            $("#quantyCurlyMaple").change(function()
            {
                 var valorb = $("#quantyCurlyMaple").val();
                 $("#sliderCurlyMaple").slider( {value : valorb} );
            })
        });
        
        // ---------------
        
        // A cada movimiento del deslizador sin soltar el botón
        function movimientob( event, ui )
        {            
             $("#quantyCurlyMaple").attr("value", ui.value );
        }
        // ---------------
        
        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiadob( event, ui )
        {
                 
             $("#").attr("value", ui.value);
        }
        
        // ---------------
        
        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function paradob( event, ui )
        {
             $("#log").append("stop ");
        }
    </script>

    <script type="text/javascript">
     $(document).ready(function()
        {
            // Mostrar el slider
             $("#sliderGenuineMahogany").slider( {min:0,
                                   max:1000, 
                                   value:0,
                                   slide:movimientoc,
                                   change:cambiadoc,
                                   stop:paradoc,
                                   step:1
                                });
            
            // Aplicar al slider un valor introducido
            $("#quantyGenuineMahogany").change(function()
            {
                 var valorc = $("#quantyGenuineMahogany").val();
                 $("#sliderGenuineMahogany").slider( {value : valorc} );
            })
        });
        
        // ---------------
        
        // A cada movimiento del deslizador sin soltar el botón
        function movimientoc( event, ui )
        {            
             $("#quantyGenuineMahogany").attr("value", ui.value );
        }
        // ---------------
        
        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiadoc( event, ui )
        {
                 
             $("#").attr("value", ui.value);
        }
        
        // ---------------
        
        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function paradoc( event, ui )
        {
             $("#log").append("stop ");
        }
    </script>
    
    <script type="text/javascript">
    
     $(document).ready(function()
        {
            // Mostrar el slider
             $("#sliderWenge").slider( {min:0,
                                   max:1000, 
                                   value:0,
                                   slide:movimientod,
                                   change:cambiadod,
                                   stop:paradod,
                                   step:1
                                });
            
            // Aplicar al slider un valor introducido
            $("#quantyWenge").change(function()
            {
                 var valord = $("#quantyWenge").val();
                 $("#sliderWenge").slider( {value : valord} );
            })
        });
        
        // ---------------
        
        // A cada movimiento del deslizador sin soltar el botón
        function movimientod( event, ui )
        {            
             $("#quantyWenge").attr("value", ui.value );
        }
        // ---------------
        
        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiadod( event, ui )
        {
                 
             $("#").attr("value", ui.value);
        }
        
        // ---------------
        
        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function paradod( event, ui )
        {
             $("#log").append("stop ");
        }
    </script>
    
    <script type="text/javascript">
    
     $(document).ready(function()
        {
            // Mostrar el slider
             $("#sliderWhiteOak").slider( {min:0,
                                   max:1000, 
                                   value:0,
                                   slide:movimientoe,
                                   change:cambiadoe,
                                   stop:paradoe,
                                   step:1
                                });
            
            // Aplicar al slider un valor introducido
            $("#quantyWhiteOak").change(function()
            {
                 var valore = $("#quantyWhiteOak").val();
                 $("#sliderWhiteOak").slider( {value : valore} );
            })
        });
        
        // ---------------
        
        // A cada movimiento del deslizador sin soltar el botón
        function movimientoe( event, ui )
        {            
             $("#quantyWhiteOak").attr("value", ui.value );
        }
        // ---------------
        
        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiadoe( event, ui )
        {
                 
             $("#").attr("value", ui.value);
        }
        
        // ---------------
        
        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function paradoe( event, ui )
        {
             $("#log").append("stop ");
        }
    </script>
    
    <script type="text/javascript">
     $(document).ready(function()
        {
            // Mostrar el slider
             $("#sliderSawdust").slider( {min:0,
                                   max:1000, 
                                   value:0,
                                   slide:movimientof,
                                   change:cambiadof,
                                   stop:paradof,
                                   step:1
                                });
            
            // Aplicar al slider un valor introducido
            $("#quantySawdust").change(function()
            {
                 var valorf = $("#quantySawdust").val();
                 $("#sliderSawdust").slider( {value : valorf} );
            })
        });
        
        // ---------------
        
        // A cada movimiento del deslizador sin soltar el botón
        function movimientof( event, ui )
        {            
             $("#quantySawdust").attr("value", ui.value );
        }
        // ---------------
        
        // Después de soltar el botón y después de producirse el evento 'stop'
        function cambiadof( event, ui )
        {
                 
             $("#").attr("value", ui.value);
        }
        
        // ---------------
        
        // Justo después de soltar el botón y antes de producirse el evento 'change'
        function paradof( event, ui )
        {
             $("#log").append("stop ");
        }
    </script>
                
                
	</head>
	<body>
		<a href="#create-woodBill" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div class="nav" role="navigation">
			<ul>
				<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
				<li><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></li>
			</ul>
		</div>
		<div id="create-woodBill" class="content scaffold-create" role="main">
			<h1><g:message code="default.create.label" args="[entityName]" /></h1>
			<g:if test="${flash.message}">
			<div class="message" role="status">${flash.message}</div>
			</g:if>
			<g:hasErrors bean="${woodBillInstance}">
			<ul class="errors" role="alert">
				<g:eachError bean="${woodBillInstance}" var="error">
				<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
				</g:eachError>
			</ul>
			</g:hasErrors>
			<g:form action="save" >
				
<div class="fieldcontain  required">
	<label for="namePerson">
		Name Person
		<span class="required-indicator">*</span>
	</label>
	<input type="text" name="namePerson" maxlength="20" required="" value="" id="namePerson" />
</div>

<div class="fieldcontain  required">
	<label for="lastNamePerson">
		Last Name Person
		<span class="required-indicator">*</span>
	</label>
	<input type="text" name="lastNamePerson" maxlength="20" required="" value="" id="lastNamePerson" />
</div>

<div class="fieldcontain  required">
	<label for="addressPerson">
		Address Person
		<span class="required-indicator">*</span>
	</label>
	<input type="text" name="addressPerson" maxlength="40" required="" value="" id="addressPerson" />
</div>

<div class="fieldcontain  required">
	<label for="quantyCherry">
		Quanty Cherry
		<span class="required-indicator">*</span>
	</label>
	<input type="null" name="quantyCherry"  required="" id="quantyCherry" value="0" readonly />
        <div  id="slidercherry"></div>  
</div>

<div class="fieldcontain  required">
	<label for="quantyCurlyMaple">
		Quanty Curly Maple
		<span class="required-indicator">*</span>
	</label>
	<input type="null" name="quantyCurlyMaple" value="0" required="" id="quantyCurlyMaple" readonly/>
        <div  id="sliderCurlyMaple"></div>
</div>

<div class="fieldcontain  required">
	<label for="quantyGenuineMahogany">
		Quanty Genuine Mahogany
		<span class="required-indicator">*</span>
	</label>
	<input type="text" name="quantyGenuineMahogany" required="" id="quantyGenuineMahogany" value="0" readonly />
        <div  id="sliderGenuineMahogany"></div>
        
</div>

<div class="fieldcontain  required">
	<label for="quantyWenge">
		Quanty Wenge
		<span class="required-indicator">*</span>
	</label>
	<input type="null" name="quantyWenge" value="0" required="" id="quantyWenge" readonly/>
        <div  id="sliderWenge"></div>
</div>

<div class="fieldcontain  required">
	<label for="quantyWhiteOak">
		Quanty White Oak
		<span class="required-indicator">*</span>
	</label>
	<input type="null" name="quantyWhiteOak" value="0" required="" id="quantyWhiteOak" readonly/>
         <div  id="sliderWhiteOak"></div>
</div>

<div class="fieldcontain  required">
	<label for="quantySawdust">
		Quanty Sawdust
		<span class="required-indicator">*</span>
	</label>
	<input type="null" name="quantySawdust" value="0" required="" id="quantySawdust" readonly />
        <div  id="sliderSawdust"></div>
</div>                         
                          
                          
                          
				<fieldset class="buttons">
					<g:submitButton name="create" class="save" />
				</fieldset>
			</g:form>
		</div>
	</body>
</html>
